<template>
  <div class="tabbar-wrap" v-show="!hide">
    <nav class="tabbar" aria-label="底部导航">
      <button v-for="(item, i) in tabs" :key="item.path" class="tab" :class="{ active: activeIndex === i }"
        @click="onSelect(i, item)" :aria-label="item.label" :aria-current="activeIndex === i ? 'page' : undefined">
        <span class="icon-svg">
          <!-- 工具 -->
          <svg class="icon" viewBox="0 0 1024 1024" version="1.1" v-if="item.key === 'tools'" width=" 200" height="200">
            <path
              d="M500.3 532c-43.3 0-78.6-35.2-78.6-78.6H370c0 3.6 0.1 7.2 0.4 10.7 5.5 66.9 61.6 119.7 129.9 119.7 66.6 0 121.7-50.2 129.4-114.7 0.6-5.1 0.9-10.4 0.9-15.7h-51.8c0.1 43.3-35.2 78.6-78.5 78.6z">
            </path>
            <path
              d="M847.1 869.3H153.5c-27.8 0-50.4-22.6-50.4-50.4V298c0-27.8 22.6-50.4 50.4-50.4h693.7c27.8 0 50.4 22.6 50.4 50.4v520.9c0 27.8-22.6 50.4-50.5 50.4z m-683.5-60.5h673.5V308.1H163.6v500.7z">
            </path>
            <path
              d="M144.7 430.7H856v60.5H144.7zM341.6 294.5h-60.5v-102c0-27.2 22.1-49.3 49.3-49.3h339.8c27.2 0 49.3 22.1 49.3 49.3v95.3H659v-84.1H341.6v90.8z">
            </path>
          </svg>
          <!-- 控制器-->
          <svg v-else-if="item.key === 'controller'" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="13326" style="width: 20px; height: 20px;">
            <path
              d="M848 491.354839h-67.612903c-9.806452-38.709677-43.870968-67.612903-87.225807-67.612904-43.870968 0-77.419355 29.419355-87.225806 67.612904H179.096774c-14.451613 0-24.258065 9.806452-24.258064 24.258064s9.806452 24.258065 24.258064 24.258065h426.83871c9.806452 38.709677 43.870968 67.612903 87.225806 67.612903 43.870968 0 77.419355-29.419355 87.225807-67.612903h67.612903c14.451613 0 24.258065-9.806452 24.258065-24.258065 0-14.451613-9.290323-24.258065-24.258065-24.258064z m-154.83871 67.612903c-24.258065 0-43.870968-19.096774-43.870967-43.870968 0-24.258065 19.096774-43.870968 43.870967-43.870968 24.258065 0 43.870968 19.096774 43.870968 43.870968-0.516129 24.774194-19.612903 43.870968-43.870968 43.870968z">
            </path>
            <path
              d="M916.129032 25.290323h-805.16129c-48.516129 0-87.225806 38.709677-87.225807 87.225806v805.16129c0 48.516129 38.709677 87.225806 87.225807 87.225807h805.16129c48.516129 0 87.225806-38.709677 87.225807-87.225807v-805.16129c0-48-38.709677-87.225806-87.225807-87.225806z m43.354839 892.903225c0 24.258065-19.096774 43.870968-43.870968 43.870968h-805.16129c-24.258065 0-43.870968-19.096774-43.870968-43.870968v-805.16129c0-24.258065 19.096774-43.870968 43.870968-43.870968h805.16129c24.258065 0 43.870968 19.096774 43.870968 43.870968v805.16129z">
            </path>
            <path
              d="M848 248.774194H465.032258C455.225806 210.064516 421.16129 180.645161 377.806452 180.645161s-72.774194 29.419355-82.580646 67.612904H179.096774c-14.451613 0-24.258065 9.806452-24.258064 19.096774 0 14.451613 9.806452 24.258065 24.258064 24.258064h116.129032c9.806452 38.709677 43.870968 67.612903 87.225807 67.612903 43.870968 0 77.419355-29.419355 87.225806-67.612903h383.483871c14.451613 0 24.258065-9.806452 24.258065-24.258064-4.645161-8.774194-14.451613-18.580645-29.419355-18.580645zM377.806452 316.387097c-24.258065 0-43.870968-19.096774-43.870968-43.870968 0-24.258065 19.096774-43.870968 43.870968-43.870968 24.258065 0 43.870968 19.096774 43.870967 43.870968 4.645161 20.129032-19.612903 43.870968-43.870967 43.870968z m470.193548 422.193548h-291.096774C547.096774 699.870968 513.032258 670.967742 469.677419 670.967742c-43.870968 0-77.419355 29.419355-87.225806 67.612903H179.096774c-14.451613 0-24.258065 9.806452-24.258064 24.258065 0 14.451613 9.806452 24.258065 24.258064 24.258064h203.870968c9.806452 38.709677 43.870968 67.612903 87.225806 67.612903 43.870968 0 77.419355-29.419355 87.225807-67.612903h291.096774c14.451613 0 24.258065-9.806452 24.258065-24.258064 0-14.451613-9.806452-24.258065-24.774194-24.258065zM469.677419 806.709677c-24.258065 0-43.870968-19.096774-43.870967-43.870967 0-24.258065 19.096774-43.870968 43.870967-43.870968 24.258065 0 43.870968 19.096774 43.870968 43.870968 0 24.258065-19.612903 43.870968-43.870968 43.870967z">
            </path>
          </svg>

          <!-- 车辆 -->
          <svg v-else-if="item.key === 'vehicle'" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="18894"
            style="width: 40px; height: 40px;">
            <path d="M76.44 783.88a451.74 10.76 0 1 0 903.48 0 451.74 10.76 0 1 0-903.48 0Z" p-id="18895"></path>
            <path
              d="M276.49 547.25l-40.87 6.45c-2.15-2.15-4.3-4.3-4.3-6.45s0-4.3 2.15-6.45l99-118.31h-17.26c-12.91 0-8.6-10.76-8.6-25.81v-17.22c0-15.06 10.76-25.81 23.66-25.81h58.08l38.72-38.72c2.15-2.15 4.3-2.15 6.45-2.15h15.06c6.45 0 12.91-6.45 12.91-10.76 0-6.45-2.15-15.06-12.91-15.06h-81.74c-8.6 0-15.06-4.3-15.06-10.76 0-4.3 2.15-17.21 8.6-17.21h99c15.06 0 28 21.51 28 36.57 0 17.21-12.91 38.72-28 38.72h-10.8L369 424.64l49.48 157h129.06l-36.57-28c-12.91-12.91-12.91-32.27 0-45.17l2.15-2.15c-25.81-4.3-43-25.81-43-51.63 0-30.12 23.66-53.78 51.63-53.78h210.78c28 0 51.63 23.66 51.63 53.78 0 28-19.36 49.48-45.17 51.63h43l86-88.2c2.15-2.15 4.3-2.15 6.45-2.15h40.87c4.3 0 8.6 4.3 8.6 8.6v40.87c0 4.3-4.3 8.6-8.6 8.6H896v68.84c28 25.81 47.32 64.53 47.32 107.56V657c0 4.3-4.3 8.6-8.6 8.6H377.6c-2.15 0-4.3 0-6.45-2.15S369 659.11 369 657v-47.37l-36.57-43z"
              p-id="18896"></path>
            <path
              d="M242.08 786c-60.23 0-107.56-47.32-107.56-107.56s47.32-107.56 107.56-107.56 107.56 47.32 107.56 107.56S302.31 786 242.08 786z m2.12-164a56.47 56.47 0 1 0 56.47 56.47c-0.01-31.06-24.01-56.47-56.48-56.47z m557.17 164c-60.23 0-107.56-47.32-107.56-107.56s47.32-107.56 107.56-107.56 107.56 47.32 107.56 107.56S861.6 786 801.37 786z m0.88-164a56.47 56.47 0 1 0 56.47 56.47c0-31.06-24-56.47-56.47-56.47z"
              p-id="18897"></path>
          </svg>
          <!-- 技术问问 -->
          <svg v-else-if="item.key === 'tech'" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="20917"
            width="200" height="200">
            <path
              d="M116.363636 907.636364V349.090909h628.363637v465.454546H237.381818L116.363636 907.636364z m46.545455-512v418.909091l60.509091-46.545455H698.181818V395.636364H162.909091z"
              p-id="20918"></path>
            <path
              d="M977.454545 651.636364l-121.018181-93.090909H698.181818v-46.545455h172.218182l60.509091 46.545455V186.181818H442.181818v202.472727h-46.545454V139.636364h581.818181zM411.927273 681.890909h46.545454v20.945455h-46.545454zM458.472727 663.272727h-46.545454v-55.854545l53.527272-62.836364v-30.254545h-69.818181v46.545454h-46.545455v-93.090909h162.909091v95.418182l-53.527273 62.836364z"
              p-id="20919"></path>
          </svg>
          <!-- 我的 -->
          <svg v-else-if="item.key === 'user'" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="22799" width="200" height="200">
            <path
              d="M354.133333 784.042667s34.816 45.226667 157.866667 45.226666 155.989333-45.226667 155.989333-45.226666l-52.48-41.984H389.546667l-35.413334 41.984z"
              fill="#dbdbdb" p-id="22800"></path>
            <path
              d="M512 493.056m-233.813333 0a233.813333 233.813333 0 1 0 467.626666 0 233.813333 233.813333 0 1 0-467.626666 0Z"
              fill="#dbdbdb" p-id="22801"></path>
            <path
              d="M425.984 464.213333h-7.424c-18.773333 0-34.133333-15.36-34.133333-34.133333v-45.312c0-18.773333 15.36-34.133333 34.133333-34.133333h7.424c18.773333 0 34.133333 15.36 34.133333 34.133333v45.312c0 18.773333-15.36 34.133333-34.133333 34.133333zM605.44 464.213333h-7.424c-18.773333 0-34.133333-15.36-34.133333-34.133333v-45.312c0-18.773333 15.36-34.133333 34.133333-34.133333h7.424c18.773333 0 34.133333 15.36 34.133333 34.133333v45.312c0 18.773333-15.36 34.133333-34.133333 34.133333z"
              p-id="22802"></path>
            <path
              d="M700.672 719.189333c92.16-61.269333 153.088-166.058667 153.088-284.757333 0-188.416-153.344-341.76-341.76-341.76S170.24 246.016 170.24 434.432c0 118.698667 60.928 223.488 153.088 284.757333a160.085333 160.085333 0 0 0-30.464 21.504c-38.997333 35.328-58.709333 87.978667-58.709333 156.416 0 18.858667 15.274667 34.133333 34.133333 34.133334s34.133333-15.274667 34.133333-34.133334c0-48.128 12.032-83.541333 35.84-105.472 32.768-30.122667 79.530667-26.88 80.810667-26.709333 2.048 0.170667 4.096 0.170667 6.058667 0a342.016 342.016 0 0 0 173.482666 0c2.133333 0.170667 4.266667 0.256 6.4 0 0.512 0 47.104-3.669333 80.213334 26.282667 24.064 21.845333 36.266667 57.429333 36.266666 105.898666 0 18.858667 15.274667 34.133333 34.133334 34.133334s34.133333-15.274667 34.133333-34.133334c0-68.522667-19.712-121.088-58.709333-156.416a156.945067 156.945067 0 0 0-30.378667-21.504zM238.506667 434.432c0-150.784 122.709333-273.493333 273.493333-273.493333s273.493333 122.709333 273.493333 273.493333S662.784 707.925333 512 707.925333 238.506667 585.216 238.506667 434.432z"
              p-id="22803"></path>
          </svg>
        </span>
      </button>
    </nav>
    <div class="safe" />
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const tabs = ref([
  { key: 'tools', label: '工具', path: '/tools' },
  { key: 'controller', label: '控制器', path: '/controllers' },
  { key: 'vehicle', label: '车辆状态', path: '/vehiclePage' },
  { key: 'tech', label: '技术问问', path: '/tech' },
  { key: 'user', label: '我的', path: '/userInfo' },
])

const route = useRoute()
const router = useRouter()

const hide = computed(() => route.path === '/login' || route.meta?.hideTabBar)

// 当前激活 index
const activeIndex = ref(2) // 默认中间（车辆状态）

// 选择 Tab
const onSelect = (i, item) => {
  activeIndex.value = i
  if (route.path !== item.path) router.replace({ path: item.path })
}

// 根据当前路由设置激活项
const syncActiveByRoute = () => {
  const idx = tabs.value.findIndex(t => route.path.startsWith(t.path))
  activeIndex.value = idx >= 0 ? idx : 2
}

onMounted(async () => {
  await nextTick()
  syncActiveByRoute()
})

watch(() => route.path, () => syncActiveByRoute(), { immediate: false })
</script>

<style scoped>
.tabbar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + constant(safe-area-inset-bottom));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  width: 100%;
  padding: 0 12px;
}

.tabbar {
  --tab-primary: #2563eb;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 25px;
  padding: 10px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.tab {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  padding: 6px 0;
  min-height: 48px;
  width:100%;
  /* slate-500 */
  transition: color .18s ease, transform .18s ease;
}

.tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
  border-radius: 10px;
}

.tab.active {
  color: var(--tab-primary);
  transform: translateY(-1px);

}

.tab.active .icon-svg svg {
  stroke: var(--tab-primary);
  fill: var(--tab-primary);
  transform: scale(1.2);
  
}


.icon-svg {
  display: grid;
  place-items: center;
  line-height: 0;
}

.icon-svg svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: #000;
  /* 纯色描边 */
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe {
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom, 0px);
}
</style>
